<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>vue学习使用</title>
	<script src="./js/vue.js"></script>
</head>

<body>
<div id="app">
	<template v-if="!error">
		<child></child>
	</template>
	<template v-else>
		<div>网站异常</div>
	</template>

</div>

<script>

  // 对于警告也要进行捕获
  Vue.config.warnHandler = function (err, vm, info) {
    // console.log(err, vm, info)
  	// 它只是一个警告，可以记录，也可以不记录，只要不在生产控制台中显示出来就可以

  }



  const child = {
    name: 'child',
    template: `<div>
			<h3>我是一个子组件 --- {{title}}</h3>
			</div>`,
    created() {
      // a
    }
  }
  // 在vue中有一个生命周期，它可以收集子孙组件中的错误信息，进行捕获
  const vm = new Vue({
    el: '#app',
    components: {
      child
    },
    data: {
      error: false
    },
    // 子孙组件错误的捕获，它要返回一个布尔类型，如果为false，则不向上传递错误了
    // err具体的错误    此信息是最为关键
    // vm发生错误的虚拟dom对象
    // info 相关提示信息
    errorCaptured(err, vm, info) {
      // console.log(err, vm, info)
      // 得到错误信息，进行网络请求，发给服务器端，让他记录下面，然后我们在统一来处理问题
      // fetch
      // 生产环境中，有时候报错，可能会有安全隐患
      this.error = true
      return false
    }
  })
</script>

</body>

</html>
